<template>
  <div class="self_box" v-if="show_delete_box">
    <div style="width: 430px">
      <div>
        <svg_button
          icon="guanbi2"
          style="font-size: 12px"
          :color="guanbi_color"
          @mouseenter="guanbi_color = '#3580EB'"
          @mouseleave="guanbi_color = '#45474A'"
          @click="$emit('close')"
        ></svg_button>
      </div>
      <div class="flex_start" style="padding: 0 0 30px 30px">
        <svg_button
          v-if="delete_box_status == 0"
          icon="jinggao"
          class="flex"
          style="font-size: 36px; height: 36px; width: 36px"
        ></svg_button>
        <svg_button
          v-else
          icon="tishi"
          class="flex"
          style="font-size: 36px; height: 36px; width: 36px"
        ></svg_button>
        <div
          style="margin-left: 14px; color: #35373a; flex: 1"
          v-if="delete_box_status == 0"
        >
          <p
            style="
              font-size: 16px;
              font-weight: bold;
              height: 36px;
              line-height: 36px;
            "
          >
            警告
          </p>
          <p style="width: 80%">
            确定 删除 <span v-if="delete_name">{{ delete_name }}</span>
            <span v-else>该项</span> ？
          </p>
        </div>
        <div style="margin-left: 14px; color: #35373a; flex: 1" v-else>
          <p
            style="
              font-size: 16px;
              font-weight: bold;
              height: 36px;
              line-height: 36px;
            "
          >
            提示
          </p>
          <p style="width: 80%">
            确定 <span v-if="delete_box_status == 2">停用 </span
            ><span v-if="delete_box_status == 1">启用 </span>
            <span v-if="delete_box_status == 3">审核通过 </span>
            <span v-if="delete_box_status == 4">审核拒绝 </span>
            <span v-if="delete_name">{{ delete_name }}</span>
            <span v-else>该项</span> ？
          </p>
        </div>
      </div>
      <el-divider style="margin: 0"></el-divider>
      <div style="text-align: right; padding: 15px 20px 15px 0">
        <el-button plain @click="$emit('close')">取消</el-button>
        <el-button
          type="primary"
          v-if="delete_box_status == 0"
          @click="$emit('submit_delete')"
          >确定</el-button
        >
        <el-button type="primary" v-else @click="$emit('submit_edit')"
          >确定</el-button
        >
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import svg_button from '@/components/svg_button.vue'
const guanbi_color = ref('#45474A')

const props = defineProps({
  show_delete_box: {
    type: Boolean,
    default: false,
  },
  delete_box_status: {
    type: Number,
    default: 0,
  },
  delete_name: {
    type: String,
    default: '',
  },
})
</script>

<style lang="scss" scoped>
.self_box {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  color: #333;
  background: rgba($color: #000000, $alpha: 0.4);
  z-index: 10002;
  > div {
    background-color: #fff;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border-radius: 4px;
    > div:first-child {
      text-align: right;
      padding: 18px 18px 0 0;
    }
  }
}
</style>
